<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>zsl</title>
	
	<!-- Bootstrap -->
	<link href="/static/index/css/bootstrap.min.css" rel="stylesheet">
	<link href="/static/index/css/reset.css" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/slideunlock.css">


	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
	<!--[if lt IE 9]>
	<script src="/static/index/js/html5shiv.min.js"></script>
	<script src="/static/index/js/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<div class="container-fluid">
	<div class="row" style="height: 100px">
	
	</div>
	<div class="row">
		<div class="col-xs-6 col-md-4 col-md-offset-4 col-xs-offset-4">
			<a href="{:url('index//weixin/login')}" class="btn">登录</a>
			<a class="btn">注册</a>
		</div>
	</div>
	<div class="row mt20">
		<div class="col-xs-6 col-md-4 col-md-offset-4 col-xs-offset-3">
			<form action="{:url('index/weixin/setRegister')}" method="post" onsubmit="return getText()" id="form">
				<div class="form-group">
					<label >用户名:</label>
					<input type="text" name="name" id="name" class="form-control" placeholder="昵称">
				</div>
				<div id="nameH" style="color:red"></div>
				<br>
				<div class="form-group">
					<label >手机:</label>
					<input type="text" name="tel" id="tel" class="form-control" placeholder="手机">
				</div>
				<div id="telH" style="color:red"></div><br>
				<div class="form-group">
					<label >邮箱:</label>
					<input type="text" name="email" id="email" class="form-control"  placeholder="邮箱">
				</div>
				<div id="emailH" style="color:red"></div><br>
				<div class="form-group">
					<label for="exampleInputPassword1">密码:</label>
					<input type="password" name="pwd" id="pwd" class="form-control" id="exampleInputPassword1"
					       placeholder="密码长度为6-32位">
				</div>
				<div id="pwdH" style="color:red"></div><br>
				<div class="form-group">
					<label for="exampleInputPassword2">确认密码:</label>
					<input type="password" name="repwd" id="repwd" class="form-control" id="exampleInputPassword2"
					       placeholder="密码长度为6-32位">
				</div>
				<div id="repwdH" style="color:red"></div><br>
				<div class="form-group">
					<label >验证码:</label>
					<input type="text" class="form-control col-xs-6 col-md-4" placeholder="验证码" name="yzm"><br>
					<input type="hidden"  class="form-control col-xs-6 col-md-4" value="" class="slideunlock-lockable"/>
					<div class="slideunlock-slider">
						<span class="slideunlock-label"></span>
						<span class="slideunlock-lable-tip">请按住滑块，拖动到最右边</span>
					</div>
				</div>
				{:token('__token__', 'sha1')}
				<div class="mt10">
				<button type="submit" class="btn btn-default">注册</button>

				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slideunlock.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/static/index/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/static/index/js/bootstrap.min.js"></script>
<script>

	//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
	function testName(){
		var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
		if (!patrn.exec(document.getElementById('name').value)) {

			document.getElementById('nameH').innerHTML='昵称请以5-20个以字母开头、可带数字、“_”、“.”的字串';
			document.getElementById('name').onblur=null;
			return  false;
		}else{
			document.getElementById('name').onblur=null;
			return  true;
		}
	}
	 document.getElementById('name').onfocus=function(){
		 document.getElementById('nameH').innerHTML='';
		 document.getElementById('name').onblur=testName;
	 }
	function testTel(){
		var patrn=/^(\d){1,3}(\d){1,12}$/;
		if (!patrn.exec(document.getElementById('tel').value)) {

			document.getElementById('telH').innerHTML='手机号请以必须以数字开头';
			document.getElementById('tel').onblur=null;
			return  false;
		}else{
			document.getElementById('tel').onblur=null;
			return  true;
		}
	}

	 document.getElementById('tel').onfocus=function(){
		 document.getElementById('telH').innerHTML='';
		 document.getElementById('tel').onblur= testTel;
	 }
	function testPwd(){
		var patrn=/^(\w){6,20}$/;
		if (!patrn.exec(document.getElementById('pwd').value)) {
			document.getElementById('pwdH').innerHTML='密码请以输入6-20个字母、数字、下划线 ';
			document.getElementById('pwd').onblur=null;
			return  false;
		}else{
			document.getElementById('pwd').onblur=null;
			return  true;
		}
	}
	 document.getElementById('pwd').onfocus=function(){
		 document.getElementById('pwdH').innerHTML='';
		 document.getElementById('pwd').onblur=testPwd;
	 }
	function testRepwd(){
		if (document.getElementById('repwd').value!==document.getElementById('pwd').value) {
			document.getElementById('repwdH').innerHTML='两次密码不一致';
			document.getElementById('repwd').onblur=null;
			return  false;
		}else{
			document.getElementById('repwd').onblur=null;
			return  true;
		}
	}
	 document.getElementById('repwd').onfocus=function(){
		 document.getElementById('repwdH').innerHTML='';
		 document.getElementById('repwd').onblur=testRepwd;
	 }
	function testEmail(){
		var patrn= /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		if (!patrn.exec(document.getElementById('email').value)) {
			document.getElementById('emailH').innerHTML='邮箱格式不正确';
			document.getElementById('email').onblur=null;
			return  false;
		}else{
			document.getElementById('email').onblur=null;
			return  true;
		}
	}
			document.getElementById('email').onfocus=function(){
				document.getElementById('emailH').innerHTML='';
		 document.getElementById('email').onblur=testEmail;
	 }

	 function getText(){
		return testName()&&testTel()&&testPwd()&&testRepwd()&&testEmail();
	}
















	$(function () {
		var slider = new SliderUnlock(".slideunlock-slider", {}, function(){

			var formData = $("#form").serialize();
			var tel = $("#tel");
			console.log(tel[0].value)
			console.log(tel)
			if(tel[0].value==''){
				alert('请输入手机号');
				slider.reset();
				return;
			}

			if (tel[0].value.indexOf("@")!= -1){
				$.ajax({
					type : 'post',
					url    : '{:url("index/weixin/email")}',
					dataType : 'json',
					data:formData,
					success: function (data){
						alert(data);
					},
					error  : function(){
						alert('发送失败');
					}
				});

			}else{
				$.ajax({
					type : 'post',
					url    : '{:url("index/weixin/sendSMS")}',
					dataType : 'json',
					data:formData,
					success: function (data){
						if (data=='发送成功'){
							alert(data);
						}else{
							alert(data);
							slider.reset();
						}
					},
					error  : function(){
						alert('发送失败');
						slider.reset();
					}
				});

			}


		}, function(){
		});
		slider.init();
	})

</script>

</body>
</html>